<template>
	<div id="life">
		<nav-tab activeColor="#3A3A3A">
			<header-item>
				<div class="header-nav1" slot="header-img">
					<van-icon name="location" size="20px" />
					<div>杭州</div>
				</div>
				<div class="header-nav2" slot="header-sc">
					<div style="font-size: 16px;color: white;">生活</div>
				</div>
				<div class="header-nav3" slot="header-xingx" @click="news">
					<img src="@/assets/image/header/xf.png">
					<div>消息</div>
				</div>
			</header-item>
		</nav-tab>
		<ul class="xuanz">
			<li class="xuanz-item" v-for="(item,index) in sysArr" :key="index">
				<img :src="item.img" />
				<div>{{item.name}}</div>
			</li>

		</ul>

		<!-- 商城 -->
		<div class="shangcheng">
			<div class="shangcheng-item">
				<div class="item-left">
					<div> 饭票</div>
					<span>代金券5折起</span>

				</div>
				<div class="itemImg"> <img src="@/assets/image/life/l5.png" /></div>
			</div>
			<div class="shangcheng-item">
				<div class="item-left">
					<div> 影票</div>
					<span>特惠看大片</span>

				</div>
				<div class="itemImg"> <img src="@/assets/image/life/l6.png" /></div>
			</div>
			<div class="shangcheng-item">
				<div class="item-left">
					<div> 限时特惠</div>
					<span>代金券5爆款限量秒杀</span>

				</div>
				<div class="itemImg"> <img src="@/assets/image/life/l7.png" /></div>
			</div>
			<div class="shangcheng-item">
				<div class="item-left">
					<div> 掌上商城</div>
					<span>立减8.9元</span>

				</div>
				<div class="itemImg"> <img src="@/assets/image/life/l8.png" /></div>
			</div>

		</div>


		<ul class="guig">
			<li v-for="(item,index) in licaiArr" :key="index" class="li-item">
				<img :src="item.img" />
				<div>{{item.name}}</div>
			</li>
		</ul>
		<!-- 轮播图 -->
		<van-swipe :autoplay="2000" class="my-swipe" indicator-color="#0074D9">
			<van-swipe-item v-for="(image, index) in images" :key="index" class="van-swipe-item">
				<img v-lazy="image" />
			</van-swipe-item>
		</van-swipe>
		<!-- 获得投资 -->
		<div class="shihui">
			<van-cell class="cellBxo">
				<!--    <div slot="icon"><img src="" /></div> -->
				<div slot="title" class="tuijian-title">获取投资</div>
				<div style="display: inline-block;float: right;margin: 0px 5px;">
					<van-icon name="arrow" size="15px" />
				</div>
			</van-cell>
			<div class="shihui-ner">
				<div class="shihui-ner-item">
					<div class="shihui-title">新农哥板栗仁</div>
					<div class="shihui-desc">香甜软糯</div>
					<div class="shihuiImg"><img src="@/assets/image/life/l14.png" /></div>
				</div>
				<div class="shihui-ner-item">
					<div class="shihui-title">威露士居家超</div>
					<div class="shihui-desc">成分温和 超值体</div>
					<div class="shihuiImg"><img src="@/assets/image/life/l15.png" /></div>
				</div>
				<div class="shihui-ner-item">
					<div class="shihui-title">可娜斯花露水</div>
					<div class="shihui-desc">温和不刺激</div>
					<div class="shihuiImg"><img src="@/assets/image/life/l16.png" /></div>
				</div>
			</div>
		</div>
		<!-- 生活特惠 -->
		<div class="tehui">
			<van-cell size="large">
				<div slots="title" style="font-size:15px;padding:0px;">生活特惠</div>
			</van-cell>
			<div class="xinmy">
				<div class="h2class">新下载用户专享</div>
				<div>商城10元无门槛现金券</div>
				<div>用劵<span>9.9</span>包邮</div>
			</div>
			<div class="yaoqing">
				<div class="yaoqing-item">
					<div style="width:62px; height: 2px; background-color:#96C16D;"></div>
					<div>邀请好友</div>
					<div style="width:62px; height: 2px; background-color:#96C16D;"></div>
					<span>赢爱奇艺会员</span>
				</div>
				<div class="yaoqing-item">
					<div style="width:62px; height: 2px; background-color:#96C16D;"></div>
					<div>屈臣氏</div>
					<div style="width:62px; height: 2px; background-color:#96C16D;"></div>
					<span>满200减30</span>
				</div>
				<div class="yaoqing-item">
					<div style="width:62px; height: 2px; background-color:#96C16D;"></div>
					<div>芒果TV</div>
					<div style="width:62px; height: 2px; background-color:#96C16D;"></div>
					<span>1元抢会员</span>
				</div>
			</div>
		</div>
		<!-- 酒店出游特惠 -->
		<div class="tehui2">
			<van-cell size="large">
				<div slots="title" style="font-size:15px;">酒店出游特惠</div>
			</van-cell>
			<div class="xinmy">
				<div class="h2class">品质出游</div>
				<div>热门度假酒店</div>
				<div><span>7</span>折促销</div>
			</div>
			<div class="yaoqing">
				<div class="yaoqing-item">
					<div style="width:62px; height: 1px; background-color:#939393;"></div>
					<div>爆款酒店</div>
					<div style="width:62px; height: 1px; background-color:#939393;"></div>
					<span>每周一上新</span>
				</div>
				<div class="yaoqing-item">
					<div style="width:62px; height: 1px; background-color:#939393;"></div>
					<div>试睡中心</div>
					<div style="width:62px; height: 1px; background-color:#939393;"></div>
					<span>399元体验</span>
				</div>
				<div class="yaoqing-item">
					<div style="width:62px; height: 1px; background-color:#939393;"></div>
					<div>全球WIFI</div>
					<div style="width:62px; height:1px; background-color:#939393;"></div>
					<span>11元/天起</span>
				</div>
			</div>
		</div>
		<!-- 为您推荐 -->
		<div class="recommend">
			<van-cell size="large">
				<div slots="title" style="font-size:15px;padding:5px;">为您推荐</div>
			</van-cell>
			<div class="recommend-bxo" v-for="(item,index) in 10" :key="index">
				<div class="leftImg"><img src="@/assets/image/life/le1.png" /></div>
				<div class="rightTitle">
					<div class="rightTitle-title"> 马油洗发水</div>
					<div class="rightTitle-desc">无硅油防脱发</div>
					<div class="rightTitle-asc">￥59.9<span>￥198</span></div>
				</div>
			</div>
		</div>
		<!-- 底部导航 -->
		<main-tab-item></main-tab-item>
	</div>
</template>

<script>
	import NavTab from '@/components/navtar/Header.vue'
	import HeaderItem from '@/components/navtar/HeaderItem.vue'
	import MainTabItem from '@/components/MainTabItem.vue'
	import Vue from 'vue';
	import {
		Lazyload
	} from 'vant';
	import {
		Icon,
		Swipe,
		SwipeItem,
		Cell
	} from 'vant';
	Vue.use(Lazyload, {
		lazyComponent: true,
	})
	export default {
		data() {
			return {
				images: [
					require('@/assets/image/home/lb1.png'),
					require('@/assets/image/home/lb1.png'),
					require('@/assets/image/home/lb1.png'),

				],
				sysArr: [{
						id: 1,
						name: '扫一扫',
						img: require('@/assets/image/life/l1.png')
					},
					{
						id: 2,
						name: '付款',
						img: require('@/assets/image/life/l2.png')
					},
					{
						id: 3,
						name: '票券',
						img: require('@/assets/image/life/l3.png')
					},
					{
						id: 4,
						name: '订单',
						img: require('@/assets/image/life/l4.png')
					},
				],
				licaiArr: [{
						id: 1,
						name: '生活缴费',
						img: require('@/assets/image/life/l9.png')
					},
					{
						id: 2,
						name: '话费流量',
						img: require('@/assets/image/life/l10.png')
					},
					{
						id: 3,
						name: '热门活动',
						img: require('@/assets/image/life/l11.png')
					},
					{
						id: 4,
						name: '荐者有份',
						img: require('@/assets/image/life/l12.png')
					},
					{
						id: 5,
						name: '全部',
						img: require('@/assets/image/life/l13.png')
					},
				]
			};
		},
		methods: {
			news() {
				this.$router.push('/news')
			}
		},
		components: {
			NavTab,
			HeaderItem,
			[Icon.name]: Icon,
			[Swipe.name]: Swipe,
			[SwipeItem.name]: SwipeItem,
			[Cell.name]: Cell,
			MainTabItem
		}
	}
</script>

<style lang="less" scoped>
	@pt: 9px;

	#life {
		// width: 750px;
		padding-bottom: 60px;
		background-color: #F0F0F2;
	}

	.xuanz {
		margin-top: 45px;
		// width: 750px;
		height: 79px;
		background-color: white;
		justify-content: space-between;
		display: flex;

		.xuanz-item {
			width: 90px;
			height: 79px;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			justify-content: center;
			flex-direction: column;
			color: #929292;

			img {
				width: 35px;
				height: 35px;
				margin: 5px 0;
			}

		}
	}

	.shangcheng {
		height: 180px;
		background-color: white;
		margin-top: @pt;
		display: flex;
		flex-wrap: wrap;

		.shangcheng-item {
			width: 185px;
			height: 90px;
			display: flex;
			align-items: center;

			.item-left {
				flex: 1;
				font-size: 16px;
				font-weight: bold;
				color: #FF8341;
				padding: 0 13px;
				box-sizing: border-box;

				span {
					display: block;
					font-size: 12px;
					font-weight: normal;
					color: #A3A3A3;
					margin-top: 5px;
				}
			}

			.itemImg {
				// text-align: center;
				flex: 1;

				img {
					width: 60px;
					height: 60px;
					border-radius: 50%;

				}
			}
		}

		.shangcheng-item:nth-child(1) {
			border-bottom: 1px solid #E4E4E4
		}

		.shangcheng-item:nth-child(2) {
			border-bottom: 1px solid #E4E4E4
		}

		.shangcheng-item:nth-child(3) {
			border-right: 1px solid #E4E4E4
		}
	}

	.guig {
		// width: 750px;
		height: 77px;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		flex-wrap: wrap;
		margin-top: @pt;

		.li-item {
			width: 65px;
			height: 77px;
			font-size: 13px;
			color: #A6A6A6;

			>img {
				width: 30px;
				height: 30px;
				margin-top: 15px;
			}
		}

		.li-item:last-child {
			border-left: 1px solid #A6A6A6;
		}
	}

	// 轮播图
	.my-swipe {
		width: 100vw;
		height: 137px;
		margin-top: @pt;

		img {
			width: 100%;
			height: 100%;
		}

	}

	.shihui {
		height: 220px;
		background: white;
		margin-top: @pt;

		.cellBxo {
			border-bottom: 1px solid #f2f2f2;
			height: 45px;
			line-height: 30px;

			.tuijian-title {
				font-size: 15px;
				// height: 20px;
			}
		}

		.shihui-ner {
			height: 175px;
			// background-color: indianred;
			display: flex;
			justify-content: space-between;

			.shihui-ner-item {
				width: 125px;
				height: 175px;
				border-right: 1px solid #F2F2F2;
				padding: 12px 13px;
				box-sizing: border-box;

				.shihui-title {
					font-size: 14px;
					color: #676767;
				}

				.shihui-desc {
					font-size: 12px;
					color: #FD6B76;
					margin: 5px 0px;
				}

				.shihuiImg {
					width: 95px;
					height: 95px;

					img {
						width: 100%;
						height: 100%;
						border-radius: 4px;
					}
				}
			}
		}
	}

	// 特惠
	.tehui {
		height: 285px;
		background-color: white;
		margin-top: @pt;

		.xinmy {
			// width: 750px;
			height: 133px;
			background-color: #E5EBDF;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 12px;
			color: #9FC88E;

			.h2class {
				font-size: 23px;
				font-weight: bold;
				color: #5EA534;
			}

			span {
				font-size: 26px;
				color: #5CA333;
			}
		}

		.yaoqing {
			height: 190px;
			display: flex;
			justify-content: space-between;
			padding: 0px 18px;
			box-sizing: border-box;
			margin-top: 5px;

			.yaoqing-item {
				width: 110px;
				height: 90px;
				background-color: #E5EBDF;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				font-size: 9px;
				color: #5CA333;

				>div {
					font-size: 13px;
					margin: 1px 0;
				}
			}
		}
	}

	//酒店出游
	.tehui2 {
		height: 285px;
		background-color: white;
		margin-top: @pt;

		.xinmy {
			// width: 750px;
			height: 133px;
			background-color: #8678AF;
			display: flex;
			flex-direction: column;
			justify-content: center;
			// align-items: center;
			font-size: 12px;
			color: #ffffff;
			padding-left: 20px;
			box-sizing: border-box;

			.h2class {
				font-size: 23px;
				font-weight: bold;
				color: #ffffff;
				margin: 10px 0px;
			}

			span {
				font-size: 37px;
				color: #ffffff;
			}
		}

		.yaoqing {
			height: 190px;
			display: flex;
			justify-content: space-between;
			padding: 0px 18px;
			box-sizing: border-box;
			margin-top: 5px;

			.yaoqing-item {
				width: 110px;
				height: 90px;
				background-color: #C2D8E9;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				font-size: 9px;
				color: #7D7D7D;

				>div {
					font-size: 13px;
					margin: 1px 0;
					color: #292827;
				}
			}
		}
	}

	.recommend {
		margin-top: @pt;
		background-color: white;

		.recommend-bxo {
			height: 131px;
			border-top: 1px solid #f2f2f2;
			border-bottom: 1px solid #f2f2f2;
			display: flex;
			padding: 15px 13px;
			box-sizing: border-box;

			.leftImg {
				flex: 1;

				img {
					width: 100px;
					height: 100px;
				}
			}

			.rightTitle {
				flex: 3;
				padding: 2px 10px;

				.rightTitle-title {
					font-size: 16px;
					color: #101010;
				}

				.rightTitle-desc {
					font-size: 14px;
					color: #606060;
					margin-top: 2px;
				}

				.rightTitle-asc {
					font-size: 16px;
					color: #FC4C5B;
					margin-top: 32px;

					span {
						font-size: 12px;
						color: #A8A8A8;
						text-decoration: line-through;
						position: absolute;
						margin-left: 5px;
					}
				}
			}
		}
	}
</style>
